<template>
	<view class="page">
		<cu-custom bgColor="bg-shadeTop" :isBack="true"><block slot="content">塑形基础</block></cu-custom>
		<view class="opacity-content">
			<swiper class="course-banner screen-swiper square-dot" :indicator-dots="true" :circular="true"
			 :autoplay="true" interval="5000" duration="500">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
					<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
				</swiper-item>
			</swiper>
			<view class="cu-card">
				<view class="cu-item shadow padding">
					<text class="block  text-lg margin-bottom-xs">
						课程介绍
					</text>
					<view>
						<text class="text-sm text-gray">塑形，就是通过身高、体重、年龄、三围等人体数据经科学计算而得出个体标准尺寸，进行有针对性地塑形计划，修震补正，使个体的外形符合标准，获得视觉上的外在美</text>
						<view class="tags margin-top-xs">
							<view class='cu-tag sm radius line-grey margin-bottom-xs'>健身基础动作细致教学</view>
							<view class='cu-tag sm radius line-grey margin-bottom-xs'>新会员必选</view>
						</view>
					</view>
				</view>
			</view>
			<view class="cu-card">
				<view class="cu-item shadow padding">
					<text class="block  text-lg margin-bottom-xs">
						上课时间
					</text>
					<view class="text-red margin-bottom-sm">
						2019-09-12 14:00~15:00
					</view>
					<text class="block  text-lg margin-bottom-xs">
						上课地点
					</text>
					<view class="text-red margin-bottom-sm">
						金穗路全球建面店
					</view>
					<text class="block  text-lg margin-bottom-xs">
						课程教练
					</text>
					<view class="flex margin-bottom-sm">
						<view v-if="userInfo.avatarUrl" class="cu-avatar xl round margin-right" :style="{'background-image': 'url('+userInfo.avatarUrl+')'}"></view>
						<view class="userinfo flex flex-direction justify-around flex-sub text-gray">
							<text>卓尼泽</text>
							<text>西安交通大学毕业，10年体能训练经营，国家足球二级运动员，国职认证教练，3年Bodybuilding教学经验，CF认证教练。</text>
						</view>
					</view>
					<text class="block  text-lg margin-bottom-xs">
						预约人数
					</text>
					<view class="cu-avatar-group">
						<view class="cu-avatar round lg" v-for="(item,index) in avatar" :key="index" :style="[{ backgroundImage:'url(' + avatar[index] + ')' }]"></view>
					</view>
				</view>
			</view>
			<view class="cu-card">
				<view class="cu-item shadow padding">
					<text class="block  text-lg margin-bottom-xs">
						适合人群
					</text>
					<view>
						<text class="text-sm text-gray">适合大肚子的人</text>
					</view>
				</view>
			</view>
			<view class="cu-card">
				<view class="cu-item shadow padding">
					<text class="block  text-black text-lg margin-bottom-xs">
						注意事项
					</text>
					<view class="text-gray">
						<text class="block text-sm">1、练前要吃饭</text>
						<text class="block text-sm">2、练后要吃饭</text>
					</view>
				</view>
			</view>
			<view class="cu-tabbar-height"></view>
			<view class="cu-bar bg-white tabbar border foot">
				<view class="text-grey submit">取消</view>
				<view class="bg-orange submit">一起练</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				cardCur: 0,
				swiperList: [
					{
						id: 0,
						type: 'image',
						url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
					}, {
						id: 1,
						type: 'image',
						url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
					}, {
						id: 2,
						type: 'image',
						url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
					},
				],
				avatar: [
					'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg',
					'https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg',
					'https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg',
					'https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg'
				],
			};
		},
		computed: {
			userInfo: function() {
				return this.$store.state.userInfo
			}
		}
	}
</script>

<style lang="scss">
.page {
	.opacity-content{
		position: absolute;
		width: 100%;
		top: 0;
	}
}
</style>
